<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
   <!-- 引入 layui.css -->
 
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/types.css}"> 
    <link rel="stylesheet" th:href="@{/static/css/index.css}"> 
    
    <!-- 引入 layui.js -->
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
    <script src="/static/js/highcharts.js"></script>
    <script src="/static/js/highcharts-3d.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
   
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  
	  
	 	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  

	  
</script>

   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 
 

    <div class="container mt-4" >
      
      <!-- 公告 -->
        <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left: 30px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
              
            <span> 分类</span> 
          
           </p>
         </div>
       </div>
       
       <div class="row">
       
         <div class="col-md-12 col-12 layui-anim layui-anim-down" >
         
           <div class="ui top attached segment">
             <div class="ui middle aligned two column grid"> 
               <div class="column">
                  <h3  class="ui teal header">分类</h3>
               </div>
               <div class="right aligned column">        
                        共  <span class="ui orange header m-inline-block m-text-thin" th:text="${types.size()}">  </span>个 
               </div>
             </div>
            </div>
            
            <div class="ui attached segment m-padded-tb-large">
            
               <div th:each="type,typeStat:${types}" class="ui labeled button m-margin-tb-tiny">
                  <a th:href="@{'/types?cpage='+${cpage}+'&id='+${type.id}}" th:class="${type.id==id?'ui basic teal button suo':'ui basic  button suo' }"><span th:text="${type.type}"> 类型名 </span></a>
                  <div th:class="${type.id==id?'ui basic teal left pointing label suo':'ui basic left pointing label suo' }" th:text="${type.sum.size()}"> 类型数量 </div>
               </div>
               

             </div>
            
         </div>
         
       </div>
       
       
       <div class="row">
            
         <!-- 文章的位置 -->
          <div class="col-lg-8 col-sm-12">
          
          
             <div th:each="blog,blogStat:${bloglist}" class=" col-sm-12 top layui-anim layui-anim-scaleSpring">
            <div class="mt-3 tou fangda" style="background-color: white;padding-right:15px;">
                <div class="media" style="padding-left:15px;padding-top:10px;padding-bottom: 15px " >     
                  <img th:src="${blog.imgurl}" alt="背景图" style="width:35%">
                  <div class="media-body" style="margin-left: 20px">
                  <a th:href="@{'/blog?id='+${blog.id}}" class="lianjie"> <span class="mt-0 bolgtitle" th:text="${blog.title}"></span></a> &nbsp;
                  <span class="ui green label" style="font-size:7px">原创</span>
                  
                  <span th:if="${blog.id==bloglistre[0].id || blog.id==bloglistre[1].id || blog.id==bloglistre[2].id || blog.id==bloglistre[3].id || blog.id==bloglistre[4].id}"> <img alt="" src="../static/img/hot.png" style="width:30px;margin-top: -8px"> </span>
                  <p class="jianjie" th:text="${blog.getSummary()}" style="font-size: 14px;text-indent: 2em;margin-top: 3px"> </p>
                 
                  </div> 
                 </div>
               
                   
                 <p class="shiying" style="color:darkgray;margin-left: 15px;margin-bottom: 15px">
                   <i class="layui-icon layui-icon-friends" style="font-size:0.8rem;color: darkgray"></i> <span  >益达</span>
                   <i class="layui-icon layui-icon-time" style="font-size:0.8rem;color: darkgray"></i> <span   th:text="${blog.getReleaseDate()}"></span>
               
               <!-- 分类 -->
                    <i class="icon folder"></i>
                    <span>
                    <a  class="lianjie2" th:href="@{'/types?id='+${blog.typeID.id}}" th:text="${blog.typeID.type}"></a>
                    </span>
                    
                <!-- 标签 -->
                   <i class="tags icon"> </i>
                   <a th:each="tag,tagStat:${blog.tags}" >
                       <a href="#" th:text="${tag.name}" class="lianjie2"> </a>&nbsp;
                   </a>
       
               
               <strong class="you" style="float:right">
                 <!-- 眼睛 -->
                 <i class="icon eye"> </i>
                 <span th:text="${blog.getClickHit()}"></span>
                  
                  <!-- 评论 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>  </svg>
                 <a th:text="${blog.replyHit.size()}"></a>
               </strong> 
                 
                   </p>
                   
             </div>
             
        </div> 
       
         <div class="col-sm-12 top">
            <ul class="pagination" style="margin:0 auto;width:207px">
              <li class="page-item"><a class="page-link" th:href="@{'/types?page=1&id='+${id}}">首页</a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/types?page='+${cpage-1<=0?1:cpage-1}+'&id='+${id}}">  < </a></li>
              <li class="page-item"><a class="page-link" th:text="${cpage}+'/'+${pages}">  </a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/types?page='+${cpage+1>=pages?pages:cpage+1}+'&id='+${id}}">  > </a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/types?page='+${pages}+'&id='+${id}}">尾页</a></li>
            </ul>
         </div>
         
        
          </div>  
          
         <!-- 饼状图的位置 -->
          <div class="col-lg-4 col-sm-12 top">
               <div id="bing"></div>
          </div>
          
         
       </div>
       
       
      <!--对应的最外层的标签 -->
    </div>
    
 
    
    
   
 

</body>

<script type="text/javascript">
  
    window.onresize = function(){
      var width = document.body.offsetWidth;
      if(width>749 && width<973){
         document.getElementById("Search").style.display="none";
      }else{
        $('#Search').css('display','inline-block');
      }
    };
    
  //Ajax更新数据
$(document).ready(function() {
  $.ajax({
    url: '/typessum',
    success: function(data) {
          var json = JSON.parse(data);
          var arr =  [];
      
      //遍历赋值    
       for(var key in json){
         if(key=='Mybatis'){
           arr.push({	name: key,
					y:  parseInt(json[key]),
					sliced: true,
					selected: true
			     });  
       } else{
         arr.push([key,parseInt(json[key])]);  
       }      
       }
       

var chart = Highcharts.chart('bing', {
		chart: {
				type: 'pie',
				options3d: {
						enabled: true,
						alpha: 45,
						beta: 0
				}
		},
		title: {
				text: '文章分布图'
		},
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						depth: 35,
						dataLabels: {
								enabled: true,
								format: '{point.name}',
								style: {
										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'green'
								}
						}
				}
		},
		series: [{
				type: 'pie',
				name: '类型占比',
				data: arr
		}],
		 credits: {
                       enabled: true, // logo设置
                       text:'Smile'
                  }
});
    },
    cache: false
  });
})
  
  
</script>

</html>